<template>
  <div class="driverAudit">
    <div>
      <!-- 详情内容 -->
      <div class="details-content">
        <!-- 行驶证正面 -->
        <div style="display: flex;flex-wrap: nowrap;height: 300px;">
          <!-- 行驶证正面 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">行驶证正面</div>
            <div style="width: 93%;margin: 0 auto;" class="info">
              <upload
                :image-url="detail.licenseFirstImg"
                usage-name="licenseFirstImg"
                @handleSucces="handleLicenseFirstSucces"
                @handleError="handleError"
              />
              <!-- <div class="sel-button">
                <el-button class="button" :type="licenseFirstImgStatuss == 0 ? 'success' : 'danger'" icon="el-icon-check" circle @click="changeStatuss('licenseFirstImgStatuss',true)" />
                <el-button class="button" :type="licenseFirstImgStatuss !== 0 ? 'info' : 'danger'" icon="el-icon-close" circle @click="changeStatuss('licenseFirstImgStatuss',false)" />
              </div> -->
            </div>

          </div>
          <!-- 行驶证正面 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form
                ref="detailForm"
                :model="detailsFrontForm"
                :rules="detailFormRules"
                label-width="120px"
              >
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="车牌号：" prop="licenseNo">
                      <el-input v-model="detailsFrontForm.licenseNo" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="使用性质：" prop="useNature">
                      <el-input v-model="detailsFrontForm.useNature" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="车牌颜色：" prop="licenseColour">
                      <el-input v-model="detailsFrontForm.licenseColour" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆所有人：" prop="owner">
                      <el-input v-model="detailsFrontForm.owner" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="行驶证住址：" prop="licenseAddress">
                      <el-input v-model="detailsFrontForm.licenseAddress" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆识别代码：">
                      <el-input v-model="detailsFrontForm.identificationCode" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="发证机关：">
                      <el-input v-model="detailsFrontForm.licenceIssuingAuthority" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆类型全称：" prop="typeFullName">
                      <el-input v-model="detailsFrontForm.typeFullName" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="注册日期：">
                      <el-date-picker
                        v-model="detailsFrontForm.licenceRegisterTime"
                        type="date"
                        style="width: 100%;"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发证日期：">
                      <el-date-picker
                        v-model="detailsFrontForm.certificateTime"
                        type="date"
                        style="width: 100%;"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 行驶证背面 -->
        <div style="display: flex;flex-wrap: nowrap;height: 230px;">
          <!-- 行驶证背面 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">行驶证背面</div>
            <div style="width: 93%;margin: 0 auto;">
              <upload
                :image-url="detail.licenseSecondImg"
                usage-name="licenseSecondImg"
                @handleSucces="handleLicenseSecondSucces"
                @handleError="handleError"
              />

            </div>
          </div>
          <!-- 行驶证背面 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form ref="detailsBackForm" :model="detailsBackForm" :rules="detailFormRules" label-width="120px">
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="额定载重：" prop="ratedLoad">
                      <el-input v-model="detailsBackForm.ratedLoad" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆载重：" prop="totalMass">
                      <el-input v-model="detailsBackForm.totalMass" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="强制报废期：" prop="mandatoryScrappingTime">
                      <el-date-picker
                        v-model="detailsBackForm.mandatoryScrappingTime"
                        type="date"
                        style="width: 100%;"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="档案编号：" prop="fileNo">
                      <el-input v-model="detailsBackForm.fileNo" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="车辆能源类型：">
                      <el-select v-model="detailsBackForm.energyTypeId" style="width:100%;" placeholder="车辆能源类型">
                        <el-option
                          v-for="item in energyTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 道路运输证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 260px;">
          <!-- 道路运输证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">道路运输证</div>
            <div style="width: 93%;margin: 0 auto;">
              <upload
                :image-url="detail.transportLicenseImg"
                usage-name="transportLicenseImg"
                @handleSucces="handleTransportLicenseSucces"
                @handleError="handleError"
              />
            </div>
          </div>
          <!-- 道路运输证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form ref="roadTransportFrom" :model="roadTransportFrom" :rules="detailFormRules" label-width="140px">
                <el-form-item label="道路运输证编号：" style="width: 54%;" prop="transportLicenseNo">
                  <el-input v-model="roadTransportFrom.transportLicenseNo" />
                </el-form-item>
                <el-form-item label="有效期起：" prop="transportLicenseStartTime">
                  <el-date-picker
                    v-model="roadTransportFrom.transportLicenseStartTime"
                    style="width: 45%;"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
                <el-form-item label="有效期至：" prop="transportLicenseEndTime">
                  <el-date-picker
                    v-model="roadTransportFrom.transportLicenseEndTime"
                    type="date"
                    style="width: 45%;"
                    placeholder="选择日期"
                  />
                </el-form-item>
                <el-form-item label="是否有效：" prop="transportLicenseStatus">
                  <el-radio-group v-model="roadTransportFrom.transportLicenseStatus">
                    <el-radio label="ACTIVE">有效</el-radio>
                    <el-radio label="INVALID">过期</el-radio>
                    <el-radio label="READY INVALID">即将过期</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 操作日志 -->
        <div style="height: 260px;">
          <!-- 操作日志 -->
          <div>
            <!-- 审核按钮 -->
            <div class="audit-btn">
              <el-button type="warning" @click="auditPass">审核通过</el-button>
              <el-button type="info" @click="auditNoPass">审核不通过</el-button>
            </div>
          </div>
          <div class="driving-license-title">操作日志</div>
          <div style="margin: 20px;">
            <el-table
              ref="tableKey"
              v-loading="listLoading"
              :data="list"
              highlight-current-row
              style="width: 100%"
              @current-change="handleCurrentChange"
            >

              <el-table-column type="index" width="50" />
              <el-table-column property="status" label="状态" width="120" />
              <el-table-column property="name" label="操作人" width="120" />
              <el-table-column property="lastUpdateTime" label="操作时间" />
              <el-table-column property="remark" label="备注" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { supplyUrl } from '@/api/common/file'
import { carAudit, energyType, carType, carDetail } from '@/api/tms/car'
import { getLog } from '@/api/tms/log'
import upload from '../../../components/Upload/index'
export default {
  components: {
    upload
  },
  data() {
    return {
      detailFormRules: {
        licenseNo: [{ required: true, message: '请填写车牌号', trigger: 'blur' }],
        useNature: [{ required: true, message: '请填写使用性质', trigger: 'blur' }],
        licenseColour: [{ required: true, message: '请填写车牌颜色', trigger: 'blur' }],
        owner: [{ required: true, message: '请填写车辆所有人', trigger: 'blur' }],
        licenseAddress: [{ required: true, message: '请填写行驶证住址', trigger: 'blur' }],
        transportLicenseNo: [{ required: true, message: '请填写道路运输证编号', trigger: 'blur' }],
        transportLicenseStartTime: [{ required: true, message: '请选择有效期起', trigger: 'blur' }],
        transportLicenseEndTime: [{ required: true, message: '请选择有效期至', trigger: 'blur' }],
        ratedLoad: [{ required: true, message: '请填写额定载重', trigger: 'blur' }],
        mandatoryScrappingTime: [{ required: true, message: '请选择强制报废期', trigger: 'blur' }]
      },
      detailsBackRules: {
      },
      transportLicenseImg: '',
      licenseSecondImg: '',
      licenseFirstImg: '',
      // 是否显示预览图片
      imgVisible: false,
      // 预览图片url
      dialogImageUrl: '',
      list: [],
      tableKey: 0,
      listLoading: true,
      // 控制弹出框显示隐藏
      showDialog: false,
      roadTransportFrom: {
        transportLicenseNo: '',
        transportLicenseStartTime: '',
        transportLicenseEndTime: '',
        transportLicenseStatus: ''
      },
      detailsFrontForm: {
        licenseNo: '',
        useNature: '',
        licenseColour: '',
        owner: '',
        licenseAddress: '',
        identificationCode: '',
        licenceIssuingAuthority: '',
        typeFullName: '',
        licenceRegisterTime: '',
        certificateTime: ''
      },
      detailsBackForm: {
        ratedLoad: '',
        totalMass: '',
        mandatoryScrappingTime: '',
        fileNo: '',
        energyTypeId: ''
      },
      frontImgEdit: false,
      backImgEdit: false,
      drivingLicenseImgEdit: false,
      limitNum: 1, // 图片数量
      ids: [],
      licenseSecondId: [],
      transportLicenseId: [],
      id: '', // 车辆ID
      energyTypeList: [],
      remark: '', // 审核不通过原因
      params: {}
    }
  },
  watch: {
  },
  created() {
    this.params = this.$route.params
    this.detail()
    this.getEnergyType()
    // this.getLogList()
  },
  methods: {
    getLogList() {
      const data = {
        aimId: [this.params.id],
        type: ['CAR'],
        category: 'audit'
      }
      getLog(data).then(res => {
        this.logList = res.records
      })
    },
    getUrl(url) {
      return supplyUrl(url)
    },
    detail() {
      carDetail(this.params.id).then((response) => {
        // 三个表单
        const detailsFrontForm = {
          licenseNo: response.licenseNo,
          useNature: response.useNature,
          licenseColour: response.licenseColour,
          owner: response.owner,
          licenseAddress: response.licenseAddress,
          identificationCode: response.identificationCode,
          licenceIssuingAuthority: response.licenceIssuingAuthority,
          typeFullName: response.typeFullName,
          licenceRegisterTime: response.licenceRegisterTime,
          certificateTime: response.certificateTime
        }
        const roadTransportFrom = {
          transportLicenseNo: response.transportLicenseNo,
          transportLicenseStartTime: response.transportLicenseStartTime,
          transportLicenseEndTime: response.transportLicenseEndTime,
          transportLicenseStatus: response.transportLicenseStatus
        }
        const detailsBackForm = {
          ratedLoad: response.ratedLoad,
          totalMass: response.totalMass,
          mandatoryScrappingTime: response.mandatoryScrappingTime,
          fileNo: response.response,
          energyTypeId: response.energyTypeId
        }
        this.detailsFrontForm = detailsFrontForm
        this.roadTransportFrom = roadTransportFrom
        this.detailsBackForm = detailsBackForm
        this.checkData()
      })
    },
    checkData() {

    },
    getEnergyType() {
      energyType().then((response) => {
        console.log('能源类型', response)
        this.energyTypeList = response
      })
    },
    handleSucces(response) {

    },
    handleLicenseFirstSucces(res) {
      this.licenseFirstImg = res.url
    },
    handleTransportLicenseSucces(res) {
      this.transportLicenseImg = res.url
    },
    handleLicenseSecondSucces(res) {
      this.licenseSecondImg = res.url
    },
    handleError() {

    },
    audit() {
      const data = {
        auditInfo: this.auditInfo,
        id: this.params.id,
        licenseFirstImg: this.licenseFirstImg,
        licenseSecondImg: this.licenseSecondImg,
        transportLicenseImg: this.transportLicenseImg
      }

      const ops = Object.assign(
        {},
        data,
        this.detailsFrontForm,
        this.detailsBackForm,
        this.roadTransportFrom
      )

      ops.transportLicenseStartTime = this.getTime(ops.transportLicenseStartTime)
      ops.transportLicenseEndTime = this.getTime(ops.transportLicenseEndTime)
      ops.mandatoryScrappingTime = this.getTime(ops.mandatoryScrappingTime)
      ops.licenceRegisterTime = this.getTime(ops.licenceRegisterTime)
      ops.certificateTime = this.getTime(ops.certificateTime)

      carAudit(ops).then((res) => {
        this.$notify({
          title: '成功',
          message: '审核完成',
          type: 'success',
          duration: 2000
        })
      })
    },
    getTime(time) {
      let t = ''
      if (time) {
        t = parseTime(time)
      }
      return t
    },
    handleCurrentChange() {},
    // 审核通过
    auditPass() {
      this.$refs['detailForm'].validate((valid) => {
        if (valid) {
          this.$refs['detailsBackForm'].validate((validV) => {
            if (validV) {
              this.$refs['roadTransportFrom'].validate((validP) => {
                if (validP) {
                  console.log('审核状态  通过', this.auditInfo)
                  this.$confirm('是否确认审核通过?', '提示', {
                    title: '审核通过',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    this.auditInfo = 'SUCCESS'
                    this.audit()
                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消审核'
                    })
                  })
                }
              })
            }
          })
        }
      })
    },
    // 审核不通过
    auditNoPass() {
      this.$prompt('不通过原因', '提示', {
        title: '审核不通过',
        inputPlaceholder: '请输入不通过理由',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '输入不能为空',
        inputValidator: (value) => {
          if (!value) {
            return '输入不能为空'
          }
        } }).then((value) => {
        this.auditInfo = 'FALL'
        this.remark = value.value
        this.audit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消不通过'
        })
      })
    }
  }

}
</script>
<style lang="scss">
.driverAudit{
    padding: 30px 0;
    .hide .el-upload--picture-card {
        display: none;
      }
    .details-content {
        border: 1px solid #E4E4E4;
        width: 95%;
        margin: 0 auto;
        height: 1150px;
    }

    .driving-license-left {
        border-bottom: 1px solid #E4E4E4;
        border-right: 1px solid #E4E4E4;
        width: 35%;
    }

    .driving-license-title {
        border-left: 2px solid #FFB500;
        width: 100px;
        text-align: center;
        font-size: 16px;
        margin: 20px;
    }

    .driving-license-right {
        border-bottom: 1px solid #E4E4E4;
        width: 65%;
        /* margin: 20px; */
    }
    .audit-btn{
        text-align: center;
        padding: 20px;
    }
    .dialog-footer{
      margin-top: 30px;

    }
}
.info{
	display: flex;
	.sel-button{
		display: grid;
		justify-items: center;
		align-items: center;
		.button{
			margin-left: 10px;
			width: 30px;
			height: 30px;
			justify-content: center;
			display: flex;
			align-items: center;
			font-size: 20px;
		}
	}
}
</style>
